<?php
/* 
    ODD HTML Editor
    Copyright (C) 2012  vinay.kumar

    This program is free software: you can redistribute it and/or modify
    it under the terms of the GNU General Public License as published by
    the Free Software Foundation, either version 3 of the License, or
    (at your option) any later version.

    This program is distributed in the hope that it will be useful,
    but WITHOUT ANY WARRANTY; without even the implied warranty of
    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    GNU General Public License for more details.

    You should have received a copy of the GNU General Public License
    along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>ODD HTML Editor</title>
<link rel="stylesheet" type="text/css"
	href="http://yui.yahooapis.com/3.5.1/build/cssgrids/grids-min.css">
<style>
body {
	margin: auto; /* center in viewport */
	width: 960px;
	background-color: #CCCCCC;
}

#toolbar {
	width: 200px;
	height: 800px;
	border: 1px solid #000;
}

#canvas {
	width: 460px;
	height: 800px;
	border: 1px solid #000;
}

#prop {
	width: 200px;
	height: 800px;
	border: 1px solid #000;
}

#button {
	height: 100px;
	width: 100px;
	border: 1px solid black;
	background-color: #8DD5E7;
	cursor: move;
	z-index: 2;
}


#html-page {
    bottom: 5px;
    right: 5px;
    border: 1px solid black;
    background-color: #8DD5E7;
    height: 500px;
    z-index: 1;
}
#html-page p {
    margin: 1em;
}
#html-page p strong {
    font-weight: bold;
}
#html-page.yui3-dd-drop-over {
    background-color: #FFA928;
}
</style>

<script src="http://yui.yahooapis.com/3.5.1/build/yui/yui-min.js"></script>
</head>
<body>
	<h1>ODD HTML Editor - Online Drag and Drop HTML Editor</h1>

	<div class="yui3-g">
	
		<div class="yui3-u" id="toolbar">
			<h1>Toolbar</h1>
			<div id="button">button</div>
		</div>
		<div class="yui3-u" id="canvas">
			<h1>Canvas</h1>
			<div id="html-page"></div>
		</div>
		<div class="yui3-u" id="prop">
			<h1>Property</h1>
		</div>
	</div>


	<script type="text/javascript">

YUI().use(['dd', 'node', 'dd-drop', 'dd-constrain'], function (Y) {
	var i = 1;
    //Selector of the node to make draggable
    var drag = new Y.DD.Drag({
        node: '#button'
    });   
    //Prevent the default end event (this moves the node back to its start position)
    drag.on('drag:end', function(e) {
        e.preventDefault();
    });
    
    var drop = new Y.DD.Drop({
        node: '#html-page'
    });
    drop.on('drop:hit', function(e) {
        var drag = e.drag;

        var str = '<p><strong>Dropped</strong>: '+ i +' time/s</p>';
        this.get('node').set('innerHTML', str);
        i++;
    });

});

</script>
</body>
</html>